<div>
    <div class="welcome">
        欢迎您 <span class="name">--</span>，祝您好运！&nbsp;&nbsp;
        账号余额：<span class="value balance">0.00</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        未结余额：<span class="value weijie">0.00</span>
    </div>

    <table class="center-table-form">
        <tr>
            <td class="label">真实姓名：</td>
            <td class="field">
                <input type="text" id="realname" minlength="2" maxlength="8" placeholder="输入真实姓名" 
                    class="am-form-field" disabled="disabled" required/>
            </td>
            <td class="clue2">
                请填写银行卡上的账户名称
            </td>
        </tr>

        <tr>
            <td class="label">出生日期：</td>
            <td class="field">
                <input style="height: 32px;" name="birthday" type="text" value="" class="am-form-field" placeholder="" data-am-datepicker readonly />
            </td>
            <td class="clue2"> </td>
        </tr>

        <tr>
            <td class="label">联系电话：</td>
            <td class="field">
                <input type="number" id="phone" placeholder="输入手机号" class="am-form-field"/>
            </td>
            <td class="clue2"> </td>
        </tr>

        <tr>
            <td class="label">QQ号码：</td>
            <td class="field">
                <input type="number" id="qq" placeholder="输入联系QQ号码" class="am-form-field"/>
            </td>
            <td class="clue2"> </td>
        </tr>

        <tr>
            <td class="label">微信：</td>
            <td class="field">
                <input type="text" id="wechat" placeholder="输入联系微信账号" class="am-form-field"/>
            </td>
            <td class="clue2"> </td>
        </tr>
    </table>
    
    <button class="center-form-button">保存</button>
</div>

<style type="text/css">
    .welcome {
        color: #5f4439;
        font-size: 16px;
        line-height: 46px;
        background-color: #ffd101;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        padding-left: 20px;
    }
    .welcome .name, .welcome .balance, .welcome .weijie{
        color: red;
    }
</style>

<script>
    ME.query(function() {
        $(".welcome .name").html(context.user.user.mobile || '游客');
        $(".welcome .balance").html(context.user.balance/100);
        $(".welcome .weijie").html(context.user.pending/100);

        // 填充表单
        if (context.user.user.name && context.user.user.name != '') {
            $("#realname").val(context.user.user.name);
            $("#realname").attr("disabled", "disabled");
        }
        else
            $("#realname").removeAttr("disabled");
        if (context.user.user.birth)
            $("input[name='birthday']").val(context.user.user.birth);
        if (context.user.user.phone)
            $("#phone").val(context.user.user.phone);
        if (context.user.user.qq)
            $("#qq").val(context.user.user.qq);
        if (context.user.user.wechat)
            $("#wechat").val(context.user.user.wechat);
    });
    $(".center-form-button").click(function() {
        startLoading();
        var info = {
            name: $("#realname").val().trim(),
            birth: $("input[name='birthday']").val().trim(),
            phone: $("#phone").val().trim(),
            qq: $("#qq").val().trim(),
            wechat: $("#wechat").val().trim(),
        };
        CMD.modify_user_info(null, info, function(r) {
            stopLoading();
            alert2("账号信息保存完成！");
            context.user.user = r;
        });
    });
</script>